{% extends 'index.html' %}
{% block main-content %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">课室创建</h3>
        </div>
    </div>

    <form class="col-md-11" style="width: 100%;left: 10px" id="createClaForm" method="post">
        <div class="form-group form-inline col-md-offset-0">
            <button type="button" class="btn btn-success" id="btn_create" style="width: 100px;height: 50px" value="开始创建">开始创建</button>&nbsp;&nbsp;
            <a class="btn btn-success" id="btn_edit" style="width: 100px;height: 50px" value="修改" data-toggle="modal"
                               data-target=".bs-example-modal-lg">修改</a>
        </div>
        <div class="form-group form-inline">
            <label for="row">行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</label>&nbsp;
            <input type="text" class="form-control" id="row" placeholder="输入行数" style="width:120px;height: 50px"
                   name="row">&nbsp;&nbsp;
            <label for="col">列&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</label>&nbsp;
            <input type="text" class="form-control" id="col" placeholder="输入列数" style="width:120px;height: 50px"
                   name="col">
            <label for="coursename">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程</label>&nbsp;
            <input type="text" class="form-control" id="coursename" placeholder="输入课程名称"
                   style="width:150px;height: 50px" name="coursename">
            <label for="classname">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</label>&nbsp;
            <input type="text" class="form-control" id="classname" placeholder="输入课室名称"
                   style="width:150px;height: 50px" name="classname">
            <label for="stunum">学生人数</label>&nbsp;
            <input type="text" class="form-control" id="stunum" placeholder="输入学生人数" style="width:130px;height: 50px"
                   name="stunum">&nbsp;&nbsp;
            <label for="seatsnum">座位总数</label>&nbsp;
            <input type="text" class="form-control" id="seatsnum" placeholder="座位自动计算" style="width:130px;height: 50px"
                   name="seatsnum" disabled>
        </div>
    </form>
    {#    <hr style="border: black solid 1px">#}
    <div class="panel panel-primary" style="clear: both">
        <div class="panel-heading">
            <h3 class="panel-title">课室查看</h3>
        </div>
    </div>

    <form action="" class="col-md-11">
        <div class="form-group form-inline">
            <label for="class_select">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</label>&nbsp;
            <select name="class_select" id="class_select" class="form-control" style="width:300px;height: 50px;">
                <option value="" selected>请选择课室名称</option>
                {% for keshi02_obj in keshi_queryset %}
                    {% if keshi02_obj.classroomnum %}
                        <option value="{{ keshi02_obj.classroomnum }}" selected>{{ keshi02_obj.classroomnum }}</option>
                    {% else %}
                        <option value="{{ keshi02_obj.classroomnum }}">{{ keshi02_obj.classroomnum }}</option>
                    {% endif %}
                {% endfor %}
            </select>&nbsp;&nbsp;
            <button type="button" class="btn btn-info" id="btn_check" style="width: 100px;height: 50px" value="查看">查看
            </button>&nbsp;&nbsp;
        </div>
    </form>
    <div class="form-group" style="height: 100%;width: 100%;background-color: #bfcbd9;clear: both;">
        <div style="background-color:#304156;font-size: 50px;height: 68px;width:100px;margin-left:45%">讲台</div>
    </div>
    <div class="form-group" style="height: 30px;width: 100%;background-color: #bfcbd9"></div>
    {% load static %}
    <div class="panel panel-info">
        <a href="">
            <div id="p2"></div>
            <div class="col-md-12" id="panel">
                <script>
                    $('#btn_check').click(function () {
                        $.ajax({
                            url: '/tea_admin/checkclass/',
                            type: 'get',
                            data: {"class_select": $('#class_select').val()},
                            async: true,
                            success: function (args) {
                                let row = args.row;
                                let col = args.col;
                                args = (args.list);
                                for (let i = 0; i < args.length; i++) {
                                    let html = '<button style=\'width:120px;height:110px;margin:5px 5px;background-color: cornsilk\'>\n' +
                                        '                    <div class="caption">\n' +
                                        '                        <img src="/static/img/devices.png" alt="" id="' + args[i] + '" style=\'width:110px;height:80px\'>\n' +
                                        '                        <p>座位:' + args[i] + '</p>\n' +
                                        '                    </div>\n' +
                                        '                </button>';
                                    $('#panel').append(html)
                                }

                                }
                            })
                    })
                </script>
            </div>
        </a>
    </div>
{#    模态框修改#}
    <div class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="" method="post">
                <h1 class="text-center">密码</h1>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" name="username" id="username" value="{{ user_obj.teaname }}" disabled>
                        </div>
                        <div class="form-group">
                            <label for="id_old_password">原密码:</label>
                            <input type="password" id="id_old_password" name="old_name"
                                   class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="id_new_password">新密码:</label>
                            <input type="password" id="id_new_password" name="new_name"
                                   class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="id_confirm_password">确认密码:</label>
                            <input type="password" id="id_confirm_password" name="confirm_name"
                                   class="form-control">
                        </div>
                        <button type="button" class="btn btn-default pull-right"
                                data-dismiss="modal">Close
                        </button>
                        <button class="btn btn-primary" id="id_edit">修改</button>
                        <br>
                        <br>
            </form>
        </div>
    </div>
</div>
    <script>
        $("#btn_create").click(function () {
            const data = {
                "row": $("#row").val(),
                "col": $("#col").val(),
                "coursename": $("#coursename").val(),
                "classname": $("#classname").val(),
                "stunum": $("#stunum").val()
            };
            $.ajax({
                url: '/tea_admin/classcreate/',
                type: 'post',
                data: data,
                success: function (args) {
                    if(args.code==200){
                        window.location.href=args.url;
                    }
                }
            })
        })
    </script>

{% endblock %}